<script setup lang="ts" name="FloatingActionButtonProperty">
import { FloatingActionButtonProperty } from './config'
import { usePropertyForm } from '@/components/Designer/utils/index'

// 悬浮按钮属性面板

const props = defineProps<{ modelValue: FloatingActionButtonProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>

<template>
  <ElForm label-width="80px" :model="formData">
    <ElCard header="按钮配置" class="property-group" shadow="never">
      <ElFormItem label="展开方向" prop="direction">
        <ElRadioGroup v-model="formData.direction">
          <ElRadio label="vertical">垂直</ElRadio>
          <ElRadio label="horizontal">水平</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="显示文字" prop="showText">
        <ElSwitch v-model="formData.showText" />
      </ElFormItem>
    </ElCard>
    <ElCard header="按钮列表" class="property-group" shadow="never">
      <Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
        <template #default="{ element, index }">
          <ElFormItem label="图标" :prop="`list[${index}].imgUrl`">
            <UploadImage v-model="element.imgUrl" height="56px" width="56px" />
          </ElFormItem>
          <ElFormItem label="文字" :prop="`list[${index}].text`">
            <InputColorPicker v-model="element.text" v-model:color="element.textColor" />
          </ElFormItem>
          <ElFormItem label="跳转链接" :prop="`list[${index}].url`">
            <MallAppLinkInput v-model="element.url" />
          </ElFormItem>
        </template>
      </Draggable>
    </ElCard>
  </ElForm>
</template>

<style scoped lang="scss"></style>
